<!DOCTYPE html>
<!-- saved from url=(0066)http://wap.js.10086.cn/hyl/CAC/wpactivity/hxhzyItem/hxhzyItem.html -->
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang=en>
    <meta content="text/html; charset=UTF-8" http-equiv=Content-Type>
    <meta name=viewport
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <meta name=GENERATOR content="MShtml 8.00.6001.23588">
    <title>条形码扫描示例</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/default.css" rel="stylesheet"/>
    <script type="text/javascript" src="bootstrap/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/jquery.form.js" type="text/javascript"></script>
    <script src='js/jweixin-1.0.0.js'></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <style>
        table {
            /*margin: auto;*/
        }

        .col-2-h-t {
            background-color: #990033;
            color: #FFFFFF;
            font-weight: bold;
            border-radius: 5px 0px 0px 0px;
            text-align: left;
        }

        .col-2-h {
            float: left;
            width: 25%;
            padding-left: 10px;
            padding-right: 5px;
            font-weight: bold;
            background-color: #990033;
            color: #FFFFFF;
            text-align: left;
        }

        .col-2-h-f {
            font-weight: bold;
            background-color: #990033;
            color: #FFFFFF;
            border-radius: 0px 0px 0px 5px;
            text-align: left;
        }

        .col-2-c-t {
            background-color: #D8D8D8;
            border-radius: 0px 5px 0px 0px;
            text-align: left;
        }

        .col-2-c {
            float: left;
            width: 75%;
            padding-left: 10px;
            padding-right: 5px;
            background-color: #D8D8D8;
            text-align: left;
        }

        .col-2-c-f {
            background-color: #D8D8D8;
            border-radius: 0px 0px 5px 0px;
            text-align: left;
        }

        .contents {
            width: 98%;
            float: center;
            margin-left: 3px;
        }

        .input {
            border-color: #cccccc;
            font-size: 14px;
            padding: 6px;
            border-width: 2px;
            border-radius: 0px;
            border-style: solid;
        }

        .column {
            width: 25%;
            font-weight: bold;
            background-color: #990033;
            color: #FFFFFF;
            text-align: left;
        }

        .column2 {
            width: 25%;
            font-weight: bold;
            background-color: #D8D8D8;
            /*border-radius: 0px 5px 0px 0px;*/
            text-align: left;
        }

        .columnLeft {
            border-radius: 5px 0px 0px 0px;
        }

        .column2Right {
            border-radius: 0px 0px 0px 5px;
        }

        .inline {
            display: inline;
        }

        .input-group-addon:hover {
            background-color: rgb(66, 141, 199);
        }
    </style>
</head>
<body>
<div class="container" id="app">
    <div class="panel">
        <div class="panel-body">
            <div class="row">
                <table style="margin-left: 3%">
                    <tr>
                        <td>
                            <img src="download.jpg" height="130px" width="130px"/>
                        </td>
                        <td>&nbsp &nbsp</td>
                        <td style="width: 100%;">
                            <h3>正官庄防伪码查询 <a style="float: right;padding-right: 20px;text-decoration:none;" href="https://kgc.cjlogistics.com.cn/app/">下载APP</a></h3>
                            <br>
                            <br>
                            请点击链接进行扫描序列号
                        </td>
                    </tr>
                </table>
                <br>
                <div class=" col-md-12">
                    <form>
                        <div class="input-group">
                            <span class="input-group-addon" id="camera" style="cursor: pointer">扫描</span>
                            <input type="text" class="form-control input-lg" id="result" placeholder="请点击链接进行扫描序列号"
                                   v-model="code"/>
                            <span class="input-group-addon" id="requestData" style="cursor: pointer"
                                  v-on:click="getData">搜索</span>
                        </div>

                    </form>
                </div>
                <div id="infoDetail" v-if="Datum.length>0">
                    <br>
                    <h3>详细信息</h3>
                    <br>
                    <table style="margin: auto;table-layout:fixed;width:100%" v-for="myresult in Datum">
                        <tr>
                            <td class="column col-2-h-t">客户编码</td>
                            <td class="column2 col-2-c-t">{{myresult.CUSTKEY}}</td>
                        </tr>
                        <tr>
                            <td class="column">客户名称</td>
                            <td class="column2">{{myresult.CUST_DESCRIPTION}}</td>
                        </tr>
                        <tr>
                            <td class="column">产品条码</td>
                            <td class="column2">{{myresult.BARCODE1}}</td>
                        </tr>
                        <tr>
                            <td class="column">产品名称</td>
                            <td class="column2">{{myresult.SKU_DESCRIPTION}}</td>
                        </tr>
                        <tr>
                            <td class="column">生产日期</td>
                            <td class="column2">{{myresult.LOTTABLE01}}</td>
                        </tr>
                        <tr>
                            <td class="column">年根</td>
                            <td class="column2">{{myresult.LOTTABLE02}}</td>
                        </tr>
                        <tr v-if="myresult.LOTTABLE03">
                            <td class="column">invoice No</td>
                            <td class="column2">{{myresult.LOTTABLE03}}</td>
                        </tr>
                        <tr v-if="!myresult.LOTTABLE03 && myresult.LOTTABLE04">
                            <td class="column">invoice No</td>
                            <td class="column2">{{myresult.LOTTABLE04}}</td>
                        </tr>
                        <tr v-if="myresult.LOTTABLE04">
                            <td class="column">生产批号</td>
                            <td class="column2">{{myresult.LOTTABLE04}}</td>
                        </tr>
                        <tr v-if="!myresult.LOTTABLE04 && myresult.LOTTABLE03">
                            <td class="column">生产批号</td>
                            <td class="column2">{{myresult.LOTTABLE03}}</td>
                        </tr>
                        <tr v-if="!myresult.LOTTABLE03 & !myresult.LOTTABLE04">
                            <td class="column">生产批号</td>
                            <td id="id8" class="column2">请拨打 021-6067-2792</td>
                        </tr>
                        <tr>
                            <td class="column col-2-h-f">出库日期</td>
                            <td class="column2 col-2-c-f">{{myresult.CONFIRMDATE}}</td>
                        </tr>
                    </table>
                </div>
                <div id="noData" v-if="noData"><h3 style="color:red;">没有数据 !!!</h3></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#camera").click(function () {
            $.ajax({
                "type": "get",
                "url": "getWxConfig?url=" + encodeURIComponent(location.href.split('#')[0]),
                "dataType": "json",
                "success": function (result) {
                    console.log('result', result)
                    var timestamp = result.timestamp;
                    var noncestr = result.nonceStr;
                    var signature = result.signature;
                    var appId = result.appId;
                    var url = result.url;
                    wx.config({
//                    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        //                                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: appId, // 必填，公众号的唯一标识
                        timestamp: timestamp, // 必填，生成签名的时间戳
                        nonceStr: noncestr, // 必填，生成签名的随机串
                        signature: signature,// 必填，签名，见附录1
                        jsApiList: ['checkJsApi', 'translateVoice', 'scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    });
                    wx.ready(function () {
                        wx.scanQRCode({
                            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                            success: function (res) {
                                var split = res.resultStr.split(",");
                                if (split.length > 1) {
                                    $("#result").val(split[1]);
                                } else {
                                    $("#result").val(split[0]);
                                }
                                //让vue识别修改的值
                                $("#result")[0].dispatchEvent(new Event('input'))
                            }
                        });
                    });
                }
            });
        });
    })

    var app = new Vue({
        el: '#app',
        data: {
            code: '',
            noData: false,
            Datum: []
        },
        methods: {
            getData: function () {
                if (!this.code) {
                    alert(this.code)
                    alert(app.code)
                    return;
                }
                axios.get('getData?code=' + this.code)
                    .then(function (response) {
                        if (response.data.length > 0) {
                            app.noData = false;
                            app.Datum = response.data;
                        } else {
                            app.Datum = [];
                            app.noData = true;
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            }
        }
    })
</script>
</body>
</html>